


<!-- 车辆详情 -->
<template>
  <div class="dashboard-container vehicle-detail">
   <div class="tab">
    <el-tabs v-model="activeName">
    <el-tab-pane label="基本信息" name="first">
      <el-form ref="form" :model="basic" label-width="80px">
 <div class="el-item1">
  <el-form-item label="车辆编号:" style="width: 260px;">
    <el-input v-model="basic.id"></el-input>
  </el-form-item>
  <el-form-item label="车牌号码:" style="width: 260px;">
    <el-input v-model="basic.licensePlate"></el-input>
  </el-form-item>
  <el-form-item label="车型名称:" style="width: 260px;">
    <el-input v-model="basic.truckTypeName"></el-input>
  </el-form-item>
 </div>
 <div class="el-item2">
  <el-form-item label="车辆体积:" style="width: 260px;">
    <el-input v-model="basic.allowableVolume"></el-input>
  </el-form-item>
  <el-form-item label="车辆载重:" style="width: 260px;">
    <el-input v-model="basic.allowableLoad"></el-input>
  </el-form-item>
  <el-form-item label="GPSID:" style="width: 260px;">
    <el-input v-model="basic.deviceGpsId"></el-input>
  </el-form-item>
 </div>
</el-form>

      <div class="p3">
          <p>图片信息：</p>
          <span><img src="@/assets/car-example1.png" alt=""></span>
          <span><img src="@/assets/car-example2.png" alt=""></span>
      </div>

      <el-button style="background-color: #e15536; width: 100px; margin-left: 100px" type="danger" @click="detailForm">编辑</el-button>
    </el-tab-pane>

    <el-tab-pane label="行驶证信息" name="second">
      <el-form ref="form" :model="driving" label-width="80px">
 <div class="el-item1">
  <el-form-item label="行驶证号码:" style="width: 260px;">
    <el-input v-model="driving.transportCertificateNumber" ></el-input>
  </el-form-item>
  <el-form-item label="发动机号码:" style="width: 260px;">
    <el-input v-model="driving.engineNumber "></el-input>
  </el-form-item>
  <el-form-item label="注册时间">
    <el-col :span="16">
      <el-date-picker type="date" v-model="driving.registrationDate" style="width: 260px;"></el-date-picker>
    </el-col>
  </el-form-item>
 </div>
 <div class="el-item2">
  <el-form-item label="强制报废日期">
    <el-col :span="16">
      <el-date-picker type="date" v-model="driving.mandatoryScrap" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="整备质量:" style="width: 260px;">
    <el-input v-model="driving.overallQuality"></el-input>
  </el-form-item>
  <el-form-item label="检验有效期">
    <el-col :span="16">
      <el-date-picker type="date" v-model="driving.mandatoryScrap" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
 </div>
 <div class="el-item3">
  <el-form-item label="核定载质量:" style="width: 260px;">
    <el-input v-model="driving.allowableWeight"></el-input>
  </el-form-item>
  <el-form-item label="有效期">
    <el-col :span="16">
      <el-date-picker type="date" v-model="driving.mandatoryScrap" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
 </div>
</el-form>
      <div class="p3">
          <p>图片信息：</p>
          <span><img src="@/assets/car-example1.png" alt=""></span>
          <span><img src="@/assets/car-example2.png" alt=""></span>
      </div>
      <el-button style="background-color: #e15536; width: 100px; margin-left: 100px" type="danger" @click="detailForm">编辑</el-button>
    </el-tab-pane>
  </el-tabs>
   </div>
  </div>
</template>
<script>
import { truckTypeDetail,  truckTypeDrivingLicenseDetail } from '@/api/transit'
export default {
data() {
  return {
        activeName: 'first',
        id: '',
        basic: {},
        driving: {}
      }
},
mounted() {
  this.id = this.$route.query.id
  if(this.id) {
    this.truckDetailList()
    this.truckDrivingDetail()
  }
},
methods: {
  // 获取车辆详情的基本信息
 async truckDetailList() {
 const res = await truckTypeDetail(this.id)
 console.log(res,'车辆详情返回的数据');
 // 回填数据
 const { id, licensePlate, allowableVolume, truckTypeName, allowableLoad, deviceGpsId, picture } = res.data 
 this.basic = {id, licensePlate, truckTypeName, allowableVolume, allowableLoad, deviceGpsId, picture}
  },
  // 获取行驶证信息
 async truckDrivingDetail() {
  const res= await truckTypeDrivingLicenseDetail(this.id)
  console.log(res, '行驶证信息');
  // 回填数据
  const { transportCertificateNumber, engineNumber, registrationDate, 
          mandatoryScrap, overallQuality, expirationDate, allowableWeight, 
          validityPeriod } = res.data
  this.driving =  { transportCertificateNumber, engineNumber, 
                    registrationDate, mandatoryScrap, overallQuality, 
                    expirationDate, allowableWeight, validityPeriod }
  },
  detailForm() {
    console.log(111);
  }
}

}
</script>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
.tab {
  margin: 20px 20px 100px 20px;
}
.p1 {
  display: flex;
  justify-content: space-between;
}
.p1 p {
  margin-right: 120px;
}
.p2 {
  display: flex;
  justify-content: space-between;
}
.p2 p {
  margin-right: 120px;
}
.p3 {
 width: 100%;
 height: 300px;
}
.p3 img {
  width: 200px;
  height: 200px;
  margin-left: 100px;

}
.stylep {
  width: 750px;
  display: flex;
  justify-content: space-between;
}
.stylep p {
  margin-right: 120px;
}

 
.el-item1 {
  display: flex;
  justify-content: space-between;
}
.el-item2 {
  display: flex;
  justify-content: space-between;
}
.el-item3 {
  display: flex;
}

</style>

<style lang="scss" scoped>
.vehicle-detail {
  ::v-deep .el-container{
    flex-direction: column;
    margin-left: 0px;

  }
  .in{
    height: calc(100vh - 205px);
    // height: 100%;
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px;
    // width: 150px;
    padding: 24px 37px 24px 37px;
    box-sizing: border-box;

    // min-height: calc(100vh - 50px);
    ::v-deep .el-aside {
      padding-bottom: 14px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item {
        // margin-top: 38px;
        cursor: pointer;
        &:first-child {
          margin-right: 53px;
          padding-left: 25px;

        }
      }
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>